<template>
  <div class="l_tuijian">
    <h3><img src="https://m.haochu.com/images/zhuantiyingyang/tig_bg.jpg" alt=""><a>热门推荐</a></h3>
    <ul>
      <div class="l_liebiao">
        <a href="">
          <div class="l_neirong">
            <div class="l_title">这款饺子皮版鸡蛋灌饼的做法，香味诱人，下班轻松做！</div>
            <div class="l_tupian">
              <div class="l_left"><img src="https://cdn.haochu.com//uploads/newimg/20180907/15362938756273.png?p=small?p=small" alt=""></div>
              <div class="l_zhong"><img src="https://cdn.haochu.com//uploads/newimg/20180907/15362941338072.png?p=small?p=small" alt=""></div>
              <div class="l_right"><img src="https://cdn.haochu.com//uploads/newimg/20180907/1536294180343.png?p=small?p=small" alt=""></div>
            </div> 
            <div class="l_caiming"><span>鸡蛋灌饼</span></div>
          </div>
        </a>
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  
}
</script>

<style scoped>
a{
    color: #333;
    text-decoration: none;
}


.l_tuijian>h3>img{
  width: 3px;
  height: 16px;
  float: left;
  margin-top: 10px;
  margin-left: 15px;
  vertical-align: middle;
}
.l_tuijian>h3{
  font-size: 20px;
  height: 34px;
  line-height: 34px;
  border-top: 1px solid #e7e7e7;
  background-color: #f7f4f4;
  font-weight: normal;
  text-align: left;
}
.l_tuijian>h3>a{
  margin-left: 10px;
}
.l_tuijian>ul{
  width: 100%;

}
.l_liebiao{
  width: 88%;
  margin-left: 20px;
  text-align: center;
}
.l_neirong{
  width: 100%;
  padding-bottom: 5px;
  overflow: hidden;
  margin-bottom: 5px;
  border-bottom: #eee 1px solid;
  position: relative;
  
}
.l_title{
  width: 100%;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  line-height: 23px;
}
.l_tupian{
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  overflow: hidden;
  background: #f7f4f4;
}
.l_left{
  width: 32.3%;
  height: 80px;
  float: left;
  margin-right: 5px;
  text-align: left;
}
.l_zhong{
  width: 32.3%;
  height: 80px;
  float: left;
  text-align: center;
}
.l_right{
  width: 32.3%;
  height: 80px;
  float: right;
  margin-left: 5px;
  text-align: right;
}
.l_tupian>div>img{
  width: 100%;
  height: 80px;
}
.l_caiming{
  width: 100%;
  height: 23px;
}
.l_caiming>span{
  display: inline;
  text-align: center;
  border: #eee 1px solid;
  padding: 3px;
  font-size: 12px;
  color: #ccc;
  float: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 16px;
} 
</style>